<!--执行历史详情-多币对-->
<template>
  <div class="bg" @rightBtn="rightBtn">
    <scroller class="scroller">
      <div class="wrapper bg1" v-if="menus">
        
        
        <!--跟单-基础信息-->
        <div class="column" v-if="data.isFollow">
          <div class="row acenter">
            <div class="row aend">
              <text class="font32 text1">{{data.followName ? T(data.followName) : T(data.strategyName)}}</text>
              <text class="font24 text3" v-if="data.strategyCode">{{'  '+data.strategyCode}}</text>
            </div>
            <div class="all"></div>
            <text class="font28 text1">{{T('跟单佣金')+':'+data.commission+'VTN/日'}}</text>
          </div>

          <div class="height20"></div>
          <div class="row acenter">
            <text class="font24 text3">{{parseTime1(data.startTime)+'-'+parseTime1(data.endTime)}}</text>
            <text class="font24 text3">{{"("+getExecuteTime(data.endTime,data.startTime)+")"}}</text>
          </div>
          
          <div class="line bg3"></div>

          <div class="row acenter" @click="userClick(data.followUserId)">
          <LImage class="image" :src="data.avatar ? data.avatar : Config.img('view_image_portrait_normal.png')"></LImage>  
          <text class="font32 text1">{{data.nickName}}</text>
          <div class="all"></div>
          <LImage class="arrow" :src="Config.img('strategy_arrow.png')"></LImage>
          </div>
        </div>
        
        <!--其他-基础信息-->
        <div class="column" v-else>

          <div class="row acenter">
            <div class="row aend">
              <text class="font32 text1">{{data.followName ? T(data.followName) : T(data.strategyName)}}</text>
              <text class="font24 text3" v-if="data.strategyCode">{{'  '+data.strategyCode}}</text>
            </div>
            <div class="all"></div>
            <text class="font28 text3">{{getState(data.endType)}}</text>
          </div>

          <div class="height20"></div>
          <div class="row aend">
            <text class="font24 text3">{{parseTime1(data.startTime)+'-'+parseTime1(data.endTime)}}</text>
            <text class="font24 text3">{{"("+getExecuteTime(data.endTime,data.startTime)+")"}}</text>
            <div class="all"></div>
            <text class="font28 text3" v-if="data.isOpenFollow==true">{{T("开放跟单")}}</text>
          </div>
        </div>

        <!--投入数据-->
        <div class="line bg3"></div>
        <div class="column">
          <text class="font24 text2 " >{{getExchangeName()}}</text>

          <div class="height20"></div>
          <div class="row">
            <text class="font24 text3">{{T('总投入')+'('+pair.investCoin+')'}}</text>
            <div class="all"></div>
            <text class="font24 text3">{{T('总收益')+'('+pair.investCoin+')'}}</text>
          </div>

          <div class="height20"></div>
          <div class="row">
            <text class="font32 text2">{{pair.investCoinnNum}}</text>
            <div class="all"></div>
            <text :class="['font32', Config.upDownFont(data.realEarnings)]">{{data.realEarnings + '(' +math.addJia(data.realEarningsRate) + '%)'}}</text>
          </div>
        </div>
        
        <!--收益信息-->
        <div class="line bg3"></div>
        <div class="row all">
          <div class="column all">
            <text class="font24 text3">{{T('实现盈亏')+'('+pair.investCoin+')'}}</text>
            <text :class="['font24', Config.upDownFont(data.earnings)]">{{math.addJia(data.earnings)}}</text>
            <text :class="['font24', Config.upDownFont(data.earnings)]">{{math.addJia(data.earningsRate)+'%'}}</text>
          </div>
          <div class="column all">
            <text class="font24 text3">{{T('浮动盈亏')+'('+pair.investCoin+')'}}</text>
            <text :class="['font24', Config.upDownFont(data.floatEarnings)]">{{math.addJia(data.floatEarnings)}}</text>
            <text :class="['font24', Config.upDownFont(data.floatEarnings)]">{{math.addJia(data.floatEarningsRate)+'%'}}</text>
          </div>
          <div class="column all aend">
            <text class="font24 text3">{{T('实现年化')+'/'+T('总年化')}}</text>
            <text :class="['font24', Config.upDownFont(data.yearIncome)]">{{math.addJia(data.yearIncome)+'%'}}</text>
            <text :class="['font24', Config.upDownFont(data.realYearIncome)]">{{math.addJia(data.realYearIncome)+'%'}}</text>
          </div>
        </div>

        <!--交易数-->
        <div class="line bg3"></div>
        <div class="row all">
          <div class="cloumn all">
            <text class="font24 text3">{{ T("累计买入") }}</text>
            <text class="font24 text2">{{ data.finishBuyCount }}</text>
          </div>
          <div class="cloumn all">
            <text class="font24 text3">{{ T("累计卖出") }}</text>
            <text class="font24 text2">{{ T(data.finishSellCount) }}</text>
          </div>
          <div class="cloumn all aend">
            <text class="font24 text3">{{T("交易数")}}</text>
            <text class="font24 text2">{{Number(data.finishBuyCount) + Number(data.finishSellCount)}}</text>
          </div>
        </div>

        <!--收走势图-->
        <div class="line bg3"></div>
        <div class="column">
          <div class="row acenter">
            <text class="font28 text1">{{T('收益分析')}}</text>
            <div class="all"></div>
            <div class="line-chart-color main1"></div>
            <text class="font24 text2">{{T("总收益率")}}</text>
          </div>
          <WeexLineChart class="line-chart" :data="lineChartData"></WeexLineChart>
        </div>

        <!-- 止盈止损 -->
        <div class="line bg3"></div>
        <div class="column">
          <text class="font28 text1">{{T('止盈止损')}}</text>
          <div class="height20"></div>
          <div class="row all">
            <div class="column all">
              <text class="font24 text3">{{T('策略止盈率')}}</text>
              <text class="font24 text2">{{stopProfit}}</text>
            </div>

            <div class="column all">
              <text class="font24 text3">{{T('策略止损率')}}</text>
              <text class="font24 text2">{{stopLoss}}</text>
            </div>

            <div class="column all aend">
              <text class="font24 text3">{{T('自动终止时间')}}</text>
              <text class="font24 text2">{{stopTime}}</text>
            </div>
          </div>
        </div>

        <div class="line bg3"></div>
      </div>
    </scroller>

    <!-- 菜单 -->
    <div class="menu" v-if="showMenu" @click="hideClick">
      <div class="meun-content bg3">
        <text class="font24 text2 meun-text" v-for="(item, index) in menus" v-bind:key="index" @click="menuClick(item)">{{T(item)}}</text>
      </div>
    </div>
  </div>
</template>

<script>
import navigator from "@/_js/navigator";
import modal from "@/_js/modal";
import math from "@/_js/math";
import Config from "@/_js/config";

const globalEvent = weex.requireModule("globalEvent");
const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("历史详情"));
weexFunction.setRightBtn(T("功能"));

/**
 * 跟单执行详情
 */
export default {
  
  data() {
    return {
      T: T,
      math: math,
      Config: Config,

      executeId: "", //执行id
      data: {},
      pair:undefined,
      lineChartData:undefined, //收益走势


      stopProfit: "", //止盈
      stopLoss: "", //止损
      stopTime: "", //自动终止时间

      
      showMenu: false, //显示菜单
      menus: undefined, //菜单
    };
  },

  mounted() {
    this.isOpenFollow = navigator.getParam("isOpenFollow");
    this.isFollow = navigator.getParam("isFollow");
    this.executeType = navigator.getParam("executeType");
    this.executeId = navigator.getParam("executeId");
    
    
    this.httpExecuteDetail(this.executeId);
  },

  methods: {

    //初始菜单
    initMenu() {
      this.menus = ['参数', "历史记录"];
    },

    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      this.menus&&(this.showMenu = !this.showMenu);
    },

    /********************************** HTTP*/
    //http策略库
    httpExecuteDetail(executeId) {
      modal.showLoad();
      var param = { executeId: this.executeId };
      weexHttp.post("strategyV3/executeHistoryDetail", param,true,(data) => {

          modal.hideLoad();
          if (data.status == 200) {
            data = data.data;
            this.data = data.executeHistoryDetail;
            this.pair = this.data.config.tradePairs[0];

            
            //收益曲线
            var result  = this.data.result;
            var pairMap = result.pairs[0];
            var realEarningsLine = pairMap.data.realEarningsLine;
            realEarningsLine = realEarningsLine;
            this.lineChartData = realEarningsLine ? realEarningsLine.items : [];


            var xiaoshu = math.getCoin(this.pair.investCoin);

            //总投入
            this.pair.investCoinnNum = math.xiaoshu(this.pair.investCoinnNum, xiaoshu, 2);

            //总盈亏
            this.data.realEarnings = math.xiaoshu(this.data.realEarnings, xiaoshu, 2);
            this.data.realEarningsRate = math.xiaoshu(this.data.realEarningsRate, 2, 2);

            //浮动盈亏
            this.data.floatEarnings = math.xiaoshu(this.data.floatEarnings, xiaoshu, 2);
            this.data.floatEarningsRate = math.xiaoshu(this.data.floatEarningsRate, 2, 2);

            //实现盈亏
            this.data.earnings = math.xiaoshu(this.data.earnings, xiaoshu, 2);
            this.data.earningsRate = math.xiaoshu(this.data.earningsRate, 2, 2);

            //止盈止损
            var configMap = this.data.config;
            configMap.stopProfit = configMap.stopProfit ? configMap.stopProfit : '';
            this.stopProfit = configMap.stopProfit.length > 0 ? (math.cheng(configMap.stopProfit, '100') + '%') : '--';
            configMap.stopLoss = configMap.stopLoss?configMap.stopLoss:'';
            this.stopLoss = configMap.stopLoss.length > 0 ? (math.cheng(configMap.stopLoss, '-100') + '%') : '--';
            configMap.stopTime = configMap.stopTime?configMap.stopTime:'';
            this.stopTime = configMap.stopTime.length > 0 ? this.parseTime1(math.getNumber(configMap.stopTime)) : '--';

            //交易数量
            var result = this.data.result;
            var resultMap = result.pairs[0].data;
            this.data.finishBuyCount = resultMap.finishBuyCount == undefined ? 0: resultMap.finishBuyCount;
            this.data.finishSellCount = resultMap.finishSellCount == undefined ? 0 : resultMap.finishSellCount;
            
            this.initMenu();
          } else if (hud) {
            modal.toast(data.msg);
          }
        }
      );
    },   
    
    /********************************** 点击事件*/
    //隐藏
    hideClick() {
      if (this.data == undefined) {
        return;
      }
      this.showMenu = false;
    },

     //菜单点击
    menuClick(item) {
      this.hideClick();

      if (item == "消息") {
        navigator.open(T("策略消息"), 'strategy/StrategyNotice', { stId: this.executeId });
        return;
      }
      
      if (item == "历史记录") {
        var param = {'executeId':this.executeId, 'investCoin':this.pair.investCoin};
        navigator.open("", 'strategy/StrategyChildRecord', param);
        return;
      }
      
      if (item == "参数") {
        
        var param = {'configMap':this.data.config,
                     'isOpenFollow':this.data.isOpenFollow};
        navigator.open('', 'run/HRunParams',param);
        return;
      }
    },
    /********************************** 获取方法*/

    //获得策略状态字符
    getState(states) {
      if (states == "STOP_HAND") {
        return T("手动终止");
      }
      if (states == "STOP_PROFIT") {
        return T("已止盈");
      }
      if (states == "STOP_LOSS") {
        return T("已止损");
      }
      if (states == "STOP_TIME") {
        return T("已定时终止");
      }
      if (states == "STOP_AUTO") {
        return T("已自动终止");
      }
      if (states == "FORCE_CLOSE") {
        return T("已强平");
      }
    },
    
    //获交易所名称
    getExchangeName(){
      var remark = this.data.remark && this.data.remark.length ? ('·' + this.data.remark) : '';
      return this.pair.apiName + remark + '（' + T('多币对') + ' ' + this.data.childCount + '）';
    },

    //获取盈亏
    getProfitLoss(data) {
      var len = data.config.tradePairs[0].investCoin == "BTC" ? 6 : 4;
      if (data.config.tradePairs[0].investCoin == data.baseCoin) {
        var sValue = math.jia(data.curPrice, data.costPrice, len, 2);
        var profitLoss = math.cheng(sValue, data.counterCoinTotal, len, 2);

        return profitLoss;
      } else {
        var first = math.chu(data.baseCoinTotal, data.curPrice, len, 2);
        var last = math.chu(data.baseCoinTotal, data.costPrice, len, 2);
        var profitLoss = math.jia(first, last, len, 2);
        return profitLoss;
      }
    },

    //获取盈亏率
    getProfitLossRate(data) {
      var len = data.config.tradePairs[0].investCoin == "BTC" ? 6 : 4;

      if (data.config.tradePairs[0].investCoin == data.baseCoin) {
        var firstValue = math.jia(data.curPrice, data.costPrice, len, 2);
        var lastValue = math.chu(firstValue, data.costPrice);

        var profitLossRate = math.cheng(lastValue, 100, len, 2);
        return profitLossRate + "%";
      } else {
        var firstValue = math.jia(data.costPrice, data.curPrice, len, 2);
        var lastValue = math.chu(firstValue, data.costPrice, len, 2);
        var profitLossRate = math.cheng(lastValue, 100, len, 2);

        return profitLossRate + "%";
      }
    },

    //时间转换(年月日时分)
    parseTime1(timestamp) {
      var time = new Date(Number(timestamp));

      var year = time.getFullYear();

      var month = time.getMonth() + 1;
      month = month < 10 ? "0" + month : month;

      var day = time.getDate();
      day = day < 10 ? "0" + day : day;

      var hour = time.getHours();
      hour = hour < 10 ? "0" + hour : hour;

      var minute = time.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;

      return year + "/" + month + "/" + day + " " + hour + ":" + minute;
    },
    //获取执行时长
    getExecuteTime(endTime, startTime) {
      var disTime = endTime - startTime;
      var day = Math.floor(disTime / 86400000);
      var hour = Math.floor((disTime % 86400000) / 3600000);
      var min = Math.floor(((disTime % 86400000) % 3600000) / 60000);
      return day + T("天") + hour + T("时") + min + T("分");
    },
  },
};
</script>


<style src="@/_css/style.css"></style>
<style scoped>
/*********************************** 基础*/
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.wrapper {
  width: 750px;
  flex-direction: column;
  padding-left: 40px;
  padding-right: 40px;
  padding: 44px;
}

.line {
  margin-top: 36px;
  width: 710px;
  height: 2px;
  margin-bottom: 40px;
}

.line-bottom {
  margin-top: 20px;
  width: 710px;
  height: 2px;
  margin-bottom: 18px;
}

.list {
  width: 710px;
}

/*********************************** 菜单*/
.menu{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}

.meun-content {
  position: absolute;
  width: 204px;
  border-radius: 4px;
  
  padding-top: 20px;
  padding-bottom: 20px;

  top: 0;
  right: 0;
}

.meun-text {
  height: 80px;
  line-height: 80px;
  width: 204px;
  text-align: center;
}

/***********************************个人信息*/
.user-img {
  width: 56px;
  height: 56px;
  border-radius: 56px;
  margin-right: 40px;
}

.user-img-right {
  width: 15px;
  height: 22px;
}
.image{
  width: 56px;
  height: 56px;
  border-radius: 28px;
  margin-right: 40px;
}
/***********************************止盈止损*/
.blue-border-bg {
  height: 28px;
  padding-left: 15px;
  padding-right: 15px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  margin-left: 15px;
  flex-direction: column;
  align-items: center;
  border-width: 2px;
}

/***********************************走势图*/
.line-chart {
  margin-top: 40px;
  flex: 1;
  height: 450px;
}
.line-chart-color{
  width: 20px;
  height: 12px;
  border-radius: 2px;
  margin-right: 20px;
}

/***********************************公共用的样式*/
.height18 {
  height: 18px;
}
.height20 {
  height: 20px;
}
.height40 {
  height: 40px;
}
.all2 {
  flex: 2;
}
.all3 {
  flex: 3;
}
</style>
